<!DOCTYPE HTML>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0,user-scalable=no">
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>draw_points</title>
    <style type="text/css">
        html {
            height: 100%
        }

        body {
            height: 100%;
            margin: 0px;
            padding: 0px
        }

        .split_Line {
            FILTER: alpha(opacity=100, finishopacity=0, style=3);
            width: 100%;
            size: 1;
            color: #987cb9;
        }

        #container {
            position: absolute;
            top: 0px;
            right: 0px;
            left: 0px;
            bottom: 0px;
        }

        #controller {
            position: absolute;
            top: 20px;
            right: 20px;
            background-color: rgba(255, 255, 255, .9);
            padding: 10px;
        }
    </style>
    <script type="text/javascript" src="./jquery-1.11.3.min.js"></script>
    <script type="text/javascript"
            src="http://webapi.amap.com/maps?v=1.3&key=aa6549d3390b86847b318e67d081ef8b">

    </script>
    <script type="text/javascript">
        var mapObj;
        var polyline;
        var allPolyLinePoints = new Array();
        var timeDisLinePoints = new Array();
        var timeDisDistance = 0;
        var gpsPolyLinePoints = new Array();
        var lbsPolyLinePoints = new Array();
        var curPolyLinePoints = new Array();
        var curDrawPolyLinePoints = new Array();
        var curDrawMarks = new Array();
        var carMarker;
        var isRun = false;
        $(document).ready(function () {
            mapObj = new AMap.Map("container", {
                view: new AMap.View2D({//创建地图二维视口
                    zoom: 14, //设置地图缩放级别
                    rotation: 0
                    //设置地图旋转角度
                }),
                lang: "zh_cn"//设置地图语言类型，默认：中文简体
            });//创建地图实例

            var fileInput = $("#fileHandle3");
            fileInput.bind('change', function () {
                var reader = new FileReader();
                reader.onloadend = function (e) {
                    parseContent3(e.target.result);
                };
                reader.readAsText(this.files[0]);
            });

            $("input[name='provider']").bind('change', function () {
                var value = $(this).val();
                if (value == 1) {
                    updateLine(gpsPolyLinePoints);
                } else if (value == 2) {
                    updateLine(lbsPolyLinePoints);
                } else {
                    updateLine(allPolyLinePoints);
                }
            });

            $("input[name='showConfig']").bind('change', function () {
                var value = $(this).val();
                if (value == 1) {
                    polyline.setMap(null);
                    for (item in curDrawMarks) {
                        curDrawMarks[item].setMap(mapObj);
                    }
                } else if (value == 2) {
                    polyline.setMap(mapObj);
                    for (item in curDrawMarks) {
                        curDrawMarks[item].setMap(mapObj);
                    }
                } else {
                    polyline.setMap(mapObj);
                    for (item in curDrawMarks) {
                        curDrawMarks[item].setMap(null);
                    }
                }
            });

            $("#runPoints").bind('click', function () {
                if (isRun) {
                    isRun = false;
                    stopAnimation();
                    $("#runPoints").val("回放");
                } else {
                    isRun = true;
                    startAnimation()
                    $("#runPoints").val("停止");
                }
            });

            $("#btnReDraw").bind('click', function () {
                clearMap();
                addLine(allPolyLinePoints);
            });

            $("#btnClear").bind('click', function () {
                clearMap();
            });


            $("#btnShowMarker").bind('click', function () {
                reDrawMarkers();
            });

            $("#disDateTime").bind('change', function () {
                var checked = $("#disDateTime").get(0).checked;
                if(checked){
                    addLine(timeDisLinePoints);
                }else{
                    addLine(allPolyLinePoints);
                }
            });

            $("#filterSpeedValue").bind('change', function () {
                var value = $(this).val();
                $("#filterSpeedDisplay").val(value + "米/秒");
            });

            $("#filterAccValue").bind('change', function () {
                var value = $(this).val();
                $("#filterAccDisplay").val(value + "米");
            });

            $("#filterDistanceValue").bind('change', function () {
                var value = $(this).val();
                $("#filterDistanceDisplay").val(value + "米");
            });
            $("#filterDistanceNetValue").bind('change', function () {
                var value = $(this).val();
                $("#filterDistanceNetDisplay").val(value + "米");
            });
        });

        function reDrawMarkers() {

            for (var index in curDrawMarks) {
                curDrawMarks[index].setMap(null);
            }
            curDrawMarks.length = 0;

            if(curDrawPolyLinePoints.length > 1000){
                alert("当前绘制点过多:"+curDrawPolyLinePoints.length);
                return;
            }

            for (index in curDrawPolyLinePoints) {
                curDrawMarks.push(new AMap.Marker({
                    position: curDrawPolyLinePoints[index],
                    offset: {x: -8, y: -34},
                    map: mapObj
                }));
            }
        }
        
        function clearMap() {
            if(polyline){
                polyline.setMap(null);
            }
            for (var index in curDrawMarks) {
                curDrawMarks[index].setMap(null);
            }
            curDrawMarks.length = 0;
        }

        function filterPointsList(pointsList) {
            if (pointsList) {
                if (pointsList.length > 0) {
                    var newArray = new Array();
                    var needFilterDate = $("#filterDateTime").get(0).checked;
                    var startDate = $("#filterStartDate").val();
                    var endDate = $("#filterEndDate").val();

                    var needFilterAcc = $("#filterAcc").get(0).checked;
                    var accValue = $("#filterAccValue").val();

                    var needFilterSpeed = $("#filterSpeed").get(0).checked;
                    var speedValue = $("#filterSpeedValue").val();

                    var needFilterDistance = $("#filterDistance").get(0).checked;
                    var distanceValue = $("#filterDistanceValue").val();

                    var needFilterNetDistance = $("#filterDistanceNet").get(0).checked;
                    var distanceNetValue = $("#filterDistanceNetValue").val();

                    for (var index in pointsList) {

                        //时间过滤
                        if (needFilterDate) {
                            if (startDate && startDate.length > 8
                                    && pointsList[index].time < startDate) {
                                continue;
                            }

                            if (endDate && endDate.length > 8
                                    && pointsList[index].time > endDate) {
                                continue;
                            }
                        }

                        //精度过滤
                        if (needFilterAcc && accValue && parseFloat(pointsList[index].acc) > accValue) {
                            continue;
                        }

                        //速度过滤
                        if (needFilterSpeed && speedValue && parseFloat(pointsList[index].speed) > speedValue) {
                            continue;
                        }

                        if (newArray.length == 0) {
                            newArray.push(pointsList[index]);
                            continue;
                        }

                        //GPS前后点距离过滤
                        if (needFilterDistance && distanceValue && pointsList[index].provider === "gps") {
                            var distance = pointsList[index].distance(newArray[newArray.length - 1]);
                            if (distance > distanceValue) {
                                continue;
                            }
                        }


                        //lbs前后点距离过滤
                        if (needFilterNetDistance && distanceNetValue && pointsList[index].provider === "lbs") {
                            var distance = pointsList[index].distance(newArray[newArray.length - 1]);
                            if (distance > distanceNetValue) {
                                continue;
                            }
                        }

                        //符合条件
                        newArray.push(pointsList[index]);

                    }
                    return newArray;
                }
            }
        }

        function startAnimation() {
            if (carMarker == null) {
                carMarker = new AMap.Marker({
                    map: mapObj,
                    //draggable:true, //是否可拖动
                    //position : new AMap.LngLat(116.397428, 39.90923),
                    icon: "http://code.mapabc.com/images/car_03.png",
                    offset: new AMap.Pixel(-26, -13), //相对于基点的位置
                    autoRotation: true
                });
            }
            carMarker.moveAlong(curDrawPolyLinePoints, 500);
        }
        function stopAnimation() {
            carMarker.stopMove();
            //carMarker.setMap(null);
        }

        var reg2 = new RegExp("\\((.| )+?\\)", "igm");

        function printResult() {
            var parseResult = "统计结果：<br/>";
            if (allPolyLinePoints.length > 0) {
                parseResult += ("起始时间：" + allPolyLinePoints[0].time + "<br/>");
                parseResult += ("结束时间："
                + allPolyLinePoints[allPolyLinePoints.length - 1].time + "<br/>");

                mapObj.setCenter(allPolyLinePoints[0]);
            }
            parseResult += "共" + allPolyLinePoints.length + "个点<br/>";
            parseResult += gpsPolyLinePoints.length + "个gps点<br/>"
            parseResult += lbsPolyLinePoints.length + "个lbs点<br/>"
            parseResult += timeDisLinePoints.length + "个非重复点,总距离 " + timeDisDistance + "米<br/>"


            parseResult += "绘制了：" + curDrawPolyLinePoints.length + "个点<br/>"
            $("#parseResult").html(parseResult);
        }

        function parseContent3(content) {

            allPolyLinePoints.length = 0;
            timeDisLinePoints.length = 0;
            gpsPolyLinePoints.length = 0;
            lbsPolyLinePoints.length = 0;
            var arr = content.match(reg2);

            for (var line in arr) {
                var lineContent = arr[line];
                if (lineContent.indexOf(",") < 0) {
                    continue;
                }
                lineContent = lineContent.substr(1, lineContent.length);
                lineContent = lineContent.substr(0, lineContent.length - 1);
//                console.info(lineContent);

                var contentParse = lineContent.split(",");
                var p_id = contentParse[0];
                var p_uid = contentParse[1];
                var p_time = contentParse[2].replace(/'/g, "");
                var p_lon = contentParse[3];
                var p_lat = contentParse[4];
                var lngLat = createLngLatObj(p_lon, p_lat, null, p_time)
                allPolyLinePoints.push(lngLat);
                timeDisLinePoints.push(lngLat);
            }
            timeDisLinePoints = timeDisLinePoints.sort(function (a, b) {
                return new Date(a.time) - new Date(b.time);
            });
            timeDisLinePoints = uniqueTime(timeDisLinePoints);

            var totalDistance = 0;
            for (var i = 1; i < timeDisLinePoints.length; i++) {
                totalDistance = totalDistance+ timeDisLinePoints[i].distance(timeDisLinePoints[i - 1]);
            }
            timeDisDistance = totalDistance;

            addLine(allPolyLinePoints);

            return;
        }

        function createLngLatObj(lng, lat, provider, time, speed, acc) {
            var lngLat = new AMap.LngLat(lng, lat);
            if (time) {
                lngLat['time'] = time;
            }
            if (provider) {
                lngLat['provider'] = provider;
            }
            if (speed) {
                lngLat['speed'] = speed;
            }
            if (acc) {
                lngLat['acc'] = acc;
            }
            return lngLat;
        }

        function LocationPoint(lon, lat, provider, time) {
            this.lon;
            this.lat;
            this.provider;
            this.time;
            this.acc;
            this.speed;
        }

        function addLine(lineArr) {
            if (polyline) {
                polyline.setMap(null);
            }
            polyline = new AMap.Polyline({
                //path : curPolyLinePoints, //设置线覆盖物路径
                strokeColor: "#3366FF", //线颜色
                strokeOpacity: 1, //线透明度
                strokeWeight: 5, //线宽
                strokeStyle: "solid", //线样式
                strokeDasharray: [10, 5]
                //补充线样式
            });
            polyline.setMap(mapObj);
            updateLine(lineArr)
        }

        function updateLine(lineArr) {
            curPolyLinePoints = lineArr;
            curDrawPolyLinePoints = filterPointsList(lineArr);
            var polylineoptions = {
                path: curDrawPolyLinePoints
            };
            polyline.setOptions(polylineoptions);
            printResult();
        }

        function uniqueTime(array) {
            if (array.length > 0) {
                var resultArray = [];
                var index = 0;
                resultArray.push(array[0]);
                for (var i = 1; i < array.length; i++) {
                    var item = array[i];
                    if (item.time != resultArray[index].time) {
                        resultArray.push(item);
                        index++;
                    }

                }
                return resultArray;
            }
            return array;
        }

        function allPrpos(obj) {
            for (var p in obj) {
                try {
                    if (typeof (obj[p]) == "function") {
                        console.log(p + "--[function]");
                    } else if (typeof (obj[p]) == "file") {
                        console.log(p + "--[file]");
                    } else {
                        console.log(p + "--" + obj[p]);
                    }
                } catch (e) {
                    console.log("error for " + p);
                }
            }
        }
    </script>

</head>

<body>
<div id="container"></div>
<div id="controller">
    <input type="file" id="fileHandle3"/> <br/>

    <hr class="split_Line"/>
    <input type="button" id="runPoints" value="回放"/>
    <input id="btnClear" type="button" value="清屏"/>
    <input id="btnReDraw" type="button" value="初始"/>
    <input id="btnShowMarker" type="button" value="打点"/>
    <br/>
    <hr class="split_Line"/>
    时间去重 ：<input type="checkbox" id="disDateTime" value="1"/><br/>
    <hr class="split_Line"/>

    <input type="radio" name="provider" value="0" checked="checked">全部点
    <!--<input type="radio" name="provider" value="1" >仅GPS点 <input-->
        <!--type="radio" name="provider" value="2">仅Lbs点 <br/>-->
    <hr class="split_Line"/>

    时间过滤 ：<input type="checkbox" id="filterDateTime" value="1"/><br/>
    起始:<input id="filterStartDate" type="text"/> <br/>
    结束:<input id="filterEndDate" type="text"/> <br/>
    <hr class="split_Line"/>

    精度过滤 ：<input type="checkbox" id="filterAcc" value="1" disabled/>
    <input id="filterAccDisplay" disabled="disabled" type="text" value="0米" style="width: 50px;"/>
    <input id="filterAccValue" type="range" min="0" max="300" step="5" value="0"/> <br/>
    <hr class="split_Line"/>

    速度过滤 ：<input type="checkbox" id="filterSpeed" value="1" disabled/>
    <input id="filterSpeedDisplay" disabled="disabled" type="text" value="0米/秒" style="width: 50px;"/>
    <input id="filterSpeedValue" type="range" min="0" max="300" step="5" value="0"/> <br/>
    <hr class="split_Line"/>

    GPS间隔 ：<input type="checkbox" id="filterDistance" value="1" disabled/>
    <input id="filterDistanceDisplay" disabled="disabled" type="text" value="0米" style="width: 50px;"/>
    <input id="filterDistanceValue" type="range" min="0" max="300" step="5" value="0"/> <br/>
    <hr class="split_Line"/>

    NET间隔 ：<input type="checkbox" id="filterDistanceNet" value="1" disabled/>
    <input id="filterDistanceNetDisplay" disabled="disabled" type="text" value="0米" style="width: 50px;"/>
    <input id="filterDistanceNetValue" type="range" min="0" max="300" step="5" value="0"/> <br/>
    <hr class="split_Line"/>

    <div hidden="true">
        <input type="radio" name="showConfig" value="0" checked="checked">线
        <input type="radio" name="showConfig" value="1">点 <input
            type="radio" name="showConfig" value="2">线和点<br/>
        <hr class="split_Line"/>
    </div>

    脚本过滤 ：<input type="checkbox" id="filterScript" value="1"/><br/>
    <textarea rows="5" style="width: 100%;">
function (pointsList){
    //do someting
}
    </textarea>
    <br/>
    <hr class="split_Line"/>

    <span id="parseResult"></span>
</div>
</body>
</html>